<template>
    <div class="ip-info-box flex-center-col">
        <div class="ip-info-tag-box flex-center">
            线路:
            <el-button class="ip-info-tag" v-for="item in obj.tagList" @click="setRoad(item)">
                {{item.name}}
            </el-button>
            <div style="position: absolute;right: 0;top: 0">
                当前线路:
                <div style="color:tomato; min-width: 150px;">
                    {{obj.tagList[obj.search.roadId-1].name}}
                </div>
            </div>
        </div>
        <div class="flex-center">
            <div>查询IP:</div>
            <div>
                <input v-model="obj.search.ip" type="text"
                       @keyup.enter="searchIP"
                       style="border: none;border-bottom: 2px solid gray;outline: none;font-size: 18px;margin:0 30px 0 25px;padding-left: 10px"/>
            </div>
            <div><el-button @click="searchIP">搜索</el-button></div>
        </div>
        <div class="ip-info-content-box flex-center-col">
            <table class="ip-info-table">
                <tr>
                    <td>省份:</td>
                    <td>{{obj.info.province}}</td>
                </tr>
                <tr>
                    <td>市区:</td>
                    <td> {{obj.info.city}}</td>
                </tr>
                <tr>
                    <td> 县城:</td>
                    <td>{{obj.info.town}}</td>
                </tr>
                <tr>
                    <td>运营商:</td>
                    <td>{{obj.info.isp}}</td>
                </tr>

                <tr>
                    <td>ip类型:</td>
                    <td>{{obj.info.type}}</td>
                </tr>
            </table>
            <button style="margin-top: 30px" class="button2" @click="getIPInfo">查询本机ip信息</button>
        </div>
    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import service from "@/assets/js/service";
    import {errorMessage} from "@/assets/js/utils";

    export default {
        name: "WebIPInformation",
        setup(){
            let obj=reactive({

                search:{
                    // 接口线路
                  roadId:3,
                  ip:0
                },
                info:{
                    province:"",
                    city:"",
                    town:"",
                    isp:"",
                    type:"",

                },

                // 线路
                tagList:[
                    {
                        name:"太平洋",
                        id:1
                    },
                    {
                        name:"百度",
                        id:2
                    },
                    {
                        name:"VORE-API",
                        id: 3

                    },
                ],
                ip:""


            })

            let initAddr=()=>{

                let data= service.getAddr()
                data.then(resp=>{
                    if(resp.code === 200){
                        obj.ip=resp.data.ip
                    }
                })

            }

            let initInfo1=(data)=>{
                obj.info.province=data.pro
                obj.info.city=data.city
                obj.info.town=""
                obj.info.isp=""
                obj.info.type=""
            }
            let initInfo2=(item)=>{

                let data=item.data[0]

                let addr=data.location
                let index1=addr.indexOf("省")
                let index2=addr.indexOf("市")
                obj.info.province=addr.substring(0,index1)
                obj.info.city=addr.substring(index1+1,index2)
                obj.info.town=""
                obj.info.isp=addr.substring(index2+1)
                obj.info.type=""
            }
            let initInfo3=(data)=>{
                obj.info.province=data.ipdata.info1
                obj.info.city=data.ipdata.info2
                obj.info.town=data.ipdata.info3
                obj.info.isp=data.ipdata.isp
                obj.info.type=data.ipinfo.type
            }

            // 搜索本机ip信息
            let getIPInfo=()=>{
                searchIP(obj.ip,obj.search.roadId)
            }

            // 搜索指定ip信息
            let searchIP=()=>{

                let data=service.getAddrInfo(obj.search.ip,obj.search.roadId)
                data.then(resp=>{

                    if(resp.code === 200){
                        switch (obj.search.roadId) {
                            case 1:initInfo1(resp.data)
                                break
                            case 2:initInfo2(resp.data)
                                break
                            case 3:initInfo3(resp.data)
                                break
                        }
                    }
                })
            }
            let setRoad=(item)=>{
                obj.search.roadId=item.id
            }
            onMounted(async ()=>{
                await initAddr()
            })

            return{
                obj,
                setRoad,
                searchIP,
                getIPInfo
            }
        }
    }
</script>

<style scoped lang="less">
    .ip-info-box{
        width: 100%;
        height: 100%;
        .ip-info-tag-box{
            width: 100%;


            .ip-info-tag{
                width: 100px;
                height: 50px;
                margin: 20px;
                border-radius: 5px;


            }
            .ip-info-tag:hover{

            }

        }
        .ip-info-content-box{
            width: 100%;
            .ip-info-table{
                width: 40%;

            }
            td{
                width: 100px;
                height: 50px;
            }
            tr>td:first-child{
                width:30px;

            }
            tr>td:last-child {
                color: tomato;
                text-align: left;
                padding-left: 30px;
                border-bottom: 1px solid gray;
            }
        }
    }
</style>